import React from 'react';
import { Tag, Space } from '@pxxtech/mobile';
import { DemoBlock } from 'demos';

export default () => {
  return (
    <>
      <DemoBlock title="基本用法">
        <Tag>123</Tag>
      </DemoBlock>

      <DemoBlock title="默认提供 5 种通用标签颜色">
        <Space>
          <Tag color="default">Default</Tag>
          <Tag color="primary">测试</Tag>
          <Tag color="success">Success</Tag>
          <Tag color="warning">Warning</Tag>
          <Tag color="danger">Danger</Tag>
        </Space>
      </DemoBlock>

      <DemoBlock title="通用标签高亮颜色">
        <Space>
          <Tag light color="default">
            Default
          </Tag>
          <Tag light color="primary">
            测试
          </Tag>
          <Tag light color="success">
            Success
          </Tag>
          <Tag light color="warning">
            Warning
          </Tag>
          <Tag light color="danger">
            Danger
          </Tag>
        </Space>
      </DemoBlock>
      <DemoBlock title="通过 CSS 变量进行个性化">
        <Space>
          <Tag color="success" style={{ '--background-color': '#c8f7c5' }}>
            Success
          </Tag>
          <Tag
            color="warning"
            style={{ '--text-color': 'var(--adm-color-text)' }}
          >
            Warning
          </Tag>
          <Tag
            color="danger"
            style={{
              '--font-size': '16px',
            }}
          >
            Danger
          </Tag>
        </Space>
      </DemoBlock>
    </>
  );
};
